<template>
  <div class="app-container">
    <el-row style="margin:15px auto">
      <el-col :span="6">
        <el-card class="box-card">
          <p>公司总收入</p>
          {{theIcome.price}}元
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <p>今日收入</p>
          {{theIcome.today}}元
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <p>本周收入</p>
          {{theIcome.week}}元
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <p>本月收入</p>
          {{theIcome.month}}元
        </el-card>
      </el-col>
    </el-row>
    <div class="filter-container c-flex-row c-aligni-center c-justify-sb">
      <el-form class="form-container">
        <el-input
          @keyup.enter.native="handleFilter"
          v-model="listQuery.consumerName"
          clearable
          placeholder="搜索消费者"
          class="width120"
        ></el-input>
        <el-input
          @keyup.enter.native="handleFilter"
          v-model="listQuery.consumerMobile"
          clearable
          placeholder="搜索手机号"
          class="width120"
        ></el-input>
        <!-- <el-input @keyup.enter.native="handleFilter" v-model="listQuery.orderNo" clearable placeholder="搜索订单号" style="width: 150px;"></el-input> -->

        <el-date-picker
          type="date"
          :editable="false"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="开始时间（开始）"
          v-model="listQuery.apply_time"
          style="width: 165px;"
        ></el-date-picker>
        <span class="c-ph10 font-s12 c-fc-xgray">到</span>
        <el-date-picker
          type="date"
          :editable="false"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="开始时间（结束）"
          v-model="listQuery.end_time"
          style="width: 165px;"
        ></el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="handleFilter" class="search">搜索</el-button>
        <el-button v-if="tableData.length > 0" @click="handleDownload">导出Excel</el-button>
      </el-form>
    </div>
    <!-- <code>
      <svg-icon icon-class="message" style="margin-right:10px;color:red;font-size:20px;"></svg-icon>
      客户消费总额：{{consume}}元，公司实收总额：{{Income}}元
    </code>-->
    <div>
      <el-table
        :data="tableData"
        row-key="id"
        v-loading="listLoading"
        element-loading-text="加载中..."
        :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
        fit
        highlight-current-row
        class="c-width100 color-222 family-PingFangSC-Regular font-s12"
      >
        <el-table-column align="center" label="消费者">
          <template slot-scope="scope">
            <img
              :src="scope.row.headimgurl != null && scope.row.headimgurl != '' ? scope.row.headimgurl : require('../../../assets/default_head.png')"
              style="width:40px;height:40px;border-radius:100%;vertical-align:middle;"
            />
            <br />
            <span>
              {{scope.row.nickname}}
              <br />
              （ID：{{scope.row.srcUserId}}）
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="手机号">
          <template slot-scope="scope">
            <span>{{scope.row.mobile}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="订单号">
			        <template slot-scope="scope">
			          <span>{{scope.row.orderNo}}</span>
			        </template>
        </el-table-column>-->
        <!-- <el-table-column align="center" label="消费金额">
			        <template slot-scope="scope">
			          <span>{{scope.row.payMoney}}</span>
			        </template>
        </el-table-column>-->
        <el-table-column align="center" label="实收入">
          <template slot-scope="scope">
            <span>{{scope.row.amount}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.src == 1">购买VIP</span>
            <span v-if="scope.row.src == 2">升级VIP</span>
            <span v-if="scope.row.src == 3">升级VIP2</span>
            <span v-if="scope.row.src == 4">升级svip</span>
            <span v-if="scope.row.src == 5">购买课程</span>
            <span v-if="scope.row.src == 6">购买分类</span>
            <span v-if="scope.row.src == 7">活动付费</span>
            <span v-if="scope.row.src == 8">资料购买</span>
            <span v-if="scope.row.src == 9">购买栏目</span>
            <span v-if="scope.row.src == 10">社群购买</span>
            <span v-if="scope.row.src == 11">购买测评</span>
            <span v-if="scope.row.src == 12">商城购买</span>
            <span v-if="scope.row.src == 13">独立商城</span>
            <span v-if="scope.row.src == 20">余额利息</span>
            <span v-if="scope.row.src == 22">购买VIP2</span>
            <span v-if="scope.row.src == 23">购买SVIP</span>
            <span v-if="scope.row.src == 24">赠送专栏</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间">
          <template slot-scope="scope">
            <span>{{scope.row.createdAt}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block text-c">
        <!--分页组件 current-page:当前页   -->
        <!--   page-sizes:每页几条数据（选项）   -->
        <!--   page-size:每页几条数据   -->
        <!--   total:总条数   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { companyIncomesList } from "@/api/finance";
export default {
  data() {
    return {
      currentPage: 1, // 当前页
      listQuery: {
        apply_time: null,
        end_time: null,
        consumerName: null,
        consumerMobile: null,
        orderNo: null,
        currentPage: 1, // 当前页
        total: null, // 数据总条数
        page: 1
      },
      theIcome:{

      },
      tableData: [],
      Income: null,
      consume: null,
      listLoading: false,
      companyId: null,
      URLAPI: process.env.BASE_API
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      companyIncomesList(this.listQuery)
        .then(res => {
          this.tableData = res.data.data.list.data;
          this.theIcome = res.data.data.data;
          this.listQuery.total = res.data.data.total;
          console.log(res);
          this.Income = res.data.data.Income;
          this.consume = res.data.data.consume;
          this.companyId = res.data.data.companyId;
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      // 切换每页几条数据方法
      // console.log(`每页 ${val} 条`)
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      // 切换当前页
      // console.log(`当前页: ${val}`)
      this.listQuery.page = val;
      this.getList();
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleDownload() {
      var form = "";
      if (this.listQuery.consumerName) {
        form += "&consumerName=" + this.listQuery.consumerName;
      }
      if (this.listQuery.consumerMobile) {
        form += "&consumerMobile=" + this.listQuery.consumerMobile;
      }
      if (this.listQuery.orderNo) {
        form += "&orderNo=" + this.listQuery.orderNo;
      }
      if (this.listQuery.apply_time) {
        form += "&apply_time=" + this.listQuery.apply_time;
      }
      if (this.listQuery.end_time) {
        form += "&end_time=" + this.listQuery.end_time;
      }

      window.open(
        this.URLAPI +
          "/excel/excelCompanyIncomes?companyId=" +
          this.companyId +
          form
      );
    }
  }
};
</script>

<style scoped>
.box-card{
  text-align: center;
  height: 100px;
  margin:0 15px;
  background: #ededed;
  line-height: 30px;
}
</style>
